<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="../common/common.jsp" %>

<div id="myGrid"></div>


<!-- 添加角色Modal start-->
<div id="addRoleDiv" class="modal fade" tabindex="-1" data-width="500" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">添加角色</h4>
  </div>
  <div class="modal-body">
   <!--  <div class="row"> -->
       <form class="form-horizontal" id="addRoleForm">
            <div class="form-group">
                <label for="text" class="control-label col-md-3">角色名 :</label>
                <div class="col-md-7">
                    <input type="text" name="text" id="addRoleName" class="form-control">
                </div>
            </div>
        </form>
   <!--  </div> -->
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
    <button type="button" id="addRoleButton" class="btn btn-primary">保存</button>
  </div>
</div>
<!-- 添加角色Modal end-->


<!-- 编辑角色Modal start-->
 <div id="editRoleDiv" class="modal fade" tabindex="-1" data-width="500" style="display: none;">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h4 class="modal-title">编辑角色</h4>
  </div>
  <div class="modal-body">
 
       <form class="form-horizontal" id="editRoleForm">
            <div class="form-group">
            <label for="text" class="control-label col-md-3">角色名 :</label>
            <div class="col-md-7">
             <input type="hidden" name="text" id="editRoleId" class="form-control">
             <input type="text" name="text" id="editRoleName" class="form-control">
            </div>
           </div>
        </form>

  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-default">关闭</button>
    <button type="button" id="editRoleButton" class="btn btn-primary">保存</button>
  </div>
</div>
<!-- 编辑角色Modal end-->

<script>
$(function(){

    //按钮组
	var buttons = [
		{content: '<button class="btn btn-primary" type="button"><span class="glyphicon glyphicon-plus"><span>创建</button>', action: 'add'},
        {content: '<button class="btn btn-success" type="button"><span class="glyphicon glyphicon-edit"></span>&nbsp;修改</button>', action: 'modify'},
        {content: '<button class="btn btn-danger" type="button"><span class="glyphicon glyphicon-remove"></span>&nbsp;删除</button>', action: 'delete'}
    ];
	
    //显示的表格字段
	var columns = [{title : "角色名称",name : "name", width : 150}];

    //自动填充表格
	var object = $("#myGrid").grid({
		 identity: 'id',
         columns: columns,
         buttons: buttons,
         querys: [{title: '角色名称', value: 'name'}],
         isUserLocalData:false,//如果为false，则发送ajax请求到url端，获取数据，否则，则视为获取静态数据
         url:"/webapi/role",
         isShowIndexCol:true,    //是否显示索引列
    });

    //激活按钮事件
    object.on({
        'add': function(){
            //显示对话框
            $('#addRoleDiv').modal('show');
        },
        'modify': function(event, data){

            //获取
            var data = grid.selectedRowsNo();
            if(data.length != 1) {
               alert("请只选择一项进行修改");
               return;
            }

            //获取索引对应的数据对象
            var rowData = grid.getItemByIndex(data);

            //要修改的角色ID
            var roleId = rowData.id;

            //要修改的角色名字
            var roleName = rowData.name;
           
            //回显数据
            $('#editRoleId').val(roleId);
            $('#editRoleName').val(roleName);

            //显示对话框
            $('#editRoleDiv').modal('show');


        },
        'delete': function(event, data){
             $('#editRoleDiv').modal('hide');
        }
    });

    //获取表格操作对象
    var grid = object.getGrid();

    //提交添加角色
    $('#addRoleButton').click(function(){

        var method = 'post';               //http提交方式
        var addRoleUrl = '/webapi/role';   //http 相对路径
        var addRoleData = {};              //请求数据 json 格式
        var returnDataType = 'json';       //回显数据格式

        var name = $('#addRoleName').val(); 
        if(isNull(name)){
            alert("角色名字不能为空");
            return;
        }
        addRoleData.name = name;    //放入json格式数据  {name:$('#addRoleName').val()}

        //异步请求
        $.ajax({
            type: method ,
            url: addRoleUrl ,
            data: JSON.stringify(addRoleData), 
            contentType : "application/json",
            dataType: returnDataType,
            success: function(result){
                alert(result.code == 200 ? '添加成功':result.message);

                //隐藏对话框
                $('#addRoleDiv').modal('hide');

                //刷新第一页的表格 （重新请求服务器）
                grid.refresh();

                //清空数据
                cleanAddFormData();
            }   
        });

    });

    //提交编辑角色
    $('#editRoleButton').click(function(){
        var method = 'put';
        var editRoleUrl = '/webapi/role';
        var editRoleData = {};
        var returnDataType = 'json';

        var id = $('#editRoleId').val();
        var name = $('#editRoleName').val();

        if(isNull(name)){
            alert("角色名字不能为空");
            return;
        }
        editRoleData.id = id;
        editRoleData.name = name;  //{id:1,name:桔色2}

        $.ajax({
             type: method ,
             url: editRoleUrl ,
             data: editRoleData ,
             dataType: returnDataType,
             success: function(result){
                alert(result.code == 200 ? '修改成功':result.message);

                //刷新当前页面的表格（重新请求服务器）
                grid.refreshByPageNo(grid.pageNo);

                //刷新第一页的表格 （重新请求服务器）
                //grid.refresh();

                //隐藏对话框
                $('#editRoleDiv').modal('hide');

                //清空数据
                cleanEditFormData();
             }   
        });

    });

    function isNull(data){
        if(data == null || data == ""){
            return true;
        }
        return false;
    }

    //清空添加表格数据
    function cleanAddFormData(){
        $('#addRoleName').val("");
    }

    //清空修改表格数据
    function cleanEditFormData(){
        $('#editRoleName').val("");
    }


})
</script>
